<template>
  <div class="top">
    <div class="left"></div>
    <div class="center">
      <div class="inp">
        <div class="inp_img1"></div>
        <div class="inp_img2">
          <svg
            t="1666871506659"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3862"
            width="16"
            height="16"
          >
            <path
              d="M938.64603 886.273219l-173.071777-173.074847c53.665247-63.987337 86.075401-146.400325 86.075401-236.446154 0-203.406666-164.895561-368.298134-368.301204-368.298134-203.409736 0-368.302227 164.892491-368.302227 368.298134 0 203.409736 164.892491 368.302227 368.302227 368.302227 89.246627 0 171.055864-31.767518 234.798631-84.579327l173.148525 173.148525c1.576915 1.576915 8.15575-2.443655 14.6957-8.979512l23.675212-23.675212C936.205445 894.428969 940.222945 887.850134 938.64603 886.273219zM483.347426 778.093381c-166.425404 0-301.338093-134.912689-301.338093-301.338093s134.912689-301.338093 301.338093-301.338093S784.685519 310.329884 784.685519 476.755288 649.773853 778.093381 483.347426 778.093381z"
              p-id="3863"
              fill="#cdcdcd"
            ></path>
          </svg>
        </div>
        <input type="text" placeholder="微软平板" @click="sou" v-model="val" />
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  props: ["name1"],
  data() {
    return {
      name: "未登录",
      val: null,
    };
  },
  created() {
    //登录状态
    this.$bus.$on("chai", (res) => {
      this.name = "";
    });
    if (sessionStorage.getItem("userid")) {
      this.name = "";
    }
  },
  methods: {
    //搜索
    sou() {
      this.$emit("fanhui", 1);
      this.$router.push({ name: "sousuo" }).catch((err) => {
        return err;
      });
    },
  },
  watch: {
    val() {
      this.$bus.$emit("sou", this.val);
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  display: flex;
  background: white;
  overflow: hidden;
  > .left {
    width: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > .center {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    > .inp {
      width: 100%;
      height: 30px;
      border-radius: 22px;
      background: white;
      display: flex;
      align-items: center;
      background: #f7f7f7;
      > .inp_img1 {
        width: 20px;
        height: 15px;
        padding-left: 4%;
        padding-right: 2%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > .inp_img2 {
        width: 20px;
        height: 15px;
        padding-left: 1%;

        img {
          width: 100%;
          height: 100%;
        }
      }
      > input {
        border: none;
        font-size: 0.12rem;
        background: #f7f7f7;
      }
    }
  }
  > .right {
    width: 0.44rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}
</style>